<div class="content">
    <div id="example_title">
        <h1>Menu Overlay</h1>
        A menu is a particular type of overlay that has selectable items. This same menus are used in the toolbar for drop down items. They can be:
        <ul>
            <li>Simple Menu</li>
            <li>Radio Menu</li>
            <li>Check Menu <span style="color: #afafaf">(hold shift key to keep it open)</span></li>
            <li>Groups of Radio <span style="color: #afafaf">(hold shift key to keep it open)</span></li>
        </ul>
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<style>
    #some-div {
        display: inline-block;
        width: 300px;
        text-align: center;
        padding: 5px;
        margin: 10px 0px;
        border: 1px solid #efefef;
        border-radius: 4px;
        background-color: #f8f8f5;
    }
</style>
<div style=" margin-top: 25px;">
    <button class="w2ui-btn action" data-value='{ "method": "showMenu" }'>Show Menu</button>
    <button class="w2ui-btn action" data-value='{ "method": "showMenu", "class": "w2ui-dark"}'>Dark Theme</button>
    <button class="w2ui-btn action" data-value='{ "method": "showMenu2" }'>Radio Menu</button>
    <button class="w2ui-btn action" data-value='{ "method": "showMenu3" }'>Check Menu</button>
    <button class="w2ui-btn action" data-value='{ "method": "showMenu4" }'>Groups of Radio</button>

    <div id="some-div">&nbsp;</div>
</div>

<div style="height: 20px"></div>

<div style="width: 200px; float: left">
    Position:
    <div style="padding: 10px; margin-bottom: 20px; line-height: 2">
        <label><input name="position" type="radio" value="left"> &nbsp;left</label><br>
        <label><input name="position" type="radio" value="right"> &nbsp;right</label><br>
        <label><input name="position" type="radio" value="top" checked> &nbsp;top</label><br>
        <label><input name="position" type="radio" value="bottom"> &nbsp;bottom</label><br>
        <label><input name="position" type="radio" value="top|bottom"> &nbsp;top or bottom</label><br>
        <label><input name="position" type="radio" value="right|left"> &nbsp;right or left</label><br>
    </div>
</div>
<div style="width: 300px; float: left">
    Anchor Alignment (only for TOP/BOTTOM):<br>
    <div style="padding: 10px; margin-bottom: 20px; line-height: 2; float: left; width: 200px">
        <label><input name="align" type="radio" value="none" checked> &nbsp;none</label><br>
        <label><input name="align" type="radio" value="left"> &nbsp;left</label><br>
        <label><input name="align" type="radio" value="right"> &nbsp;right</label><br>
        <label><input name="align" type="radio" value="both"> &nbsp;both</label><br>
    </div>
</div>
<div style="clear: both"></div>

<!--CODE-->
<script type="module">
import { query, w2menu, w2utils } from '__W2UI_PATH__'

let align = 'left';
let position = 'top'

query('input[name=position]').on('click', event => position = event.target.value )
query('input[name=align]').on('click', event => align = event.target.value)
query('button.action').on('click', event => {
    let options = JSON.parse(query(event.target).attr('data-value'))
    if (options.method == "showMenu") {
        showMenu(event.target, options)
    }
    if (options.method == "showMenu2") {
        showMenu2(event.target, options)
    }
    if (options.method == "showMenu3") {
        showMenu3(event.target, options)
    }
    if (options.method == "showMenu4") {
        showMenu4(event.target, options)
    }
})

function showMenu(el, options = {}) {
    w2menu.hide('menu-overlay') // hide if previously opened
    w2menu.show(w2utils.extend({
        name: 'menu-overlay',
        anchor: el,
        align,
        position,
        hideOn: ['doc-click', 'select', 'blur'],
        items: [
            { id: 'ind-1', text: 'Item 1', icon: 'fa fa-star' },
            { id: 'sub', text: 'Sub Menu', icon: 'fa fa-star',
                items: [
                    { id: 'sub-1', text: 'Item 1', icon: 'fa fa-star' },
                    { id: 'sub-2', text: 'Item 2', icon: 'fa fa-star-o' },
                    { id: 'sub-3', text: 'Item 3', icon: 'fa fa-camera' },
                    { id: 'sub-sub', text: 'Sub Sub Menu', icon: 'fa fa-star',
                        items: [
                            { id: 'sub-sub-1', text: 'Item 1', icon: 'fa fa-star' },
                            { id: 'sub-sub-2', text: 'Item 2', icon: 'fa fa-star-o' },
                            { id: 'sub-sub-3', text: 'Item 3', icon: 'fa fa-camera' }
                        ]
                    },
                    { id: 'sub-4', text: 'Item 4', icon: 'fa fa-star-o' },
                    { id: 'sub-5', text: 'Item 5', icon: 'fa fa-camera' },
                ]
            },
            { id: 'ind-2', text: 'Item 2', icon: 'fa fa-star-o' },
            { id: 'ind-3', text: 'Item 3', icon: 'fa fa-camera' },
            { id: 'sub-b', text: 'Sub Menu', icon: 'fa fa-star',
                items: [
                    { id: 'sub-b-1', text: 'Item 1a', icon: 'fa fa-star' },
                    { id: 'sub-b-2', text: 'Item 2b', icon: 'fa fa-star-o' },
                    { id: 'sub-b-3', text: 'Item 3c', icon: 'fa fa-camera' }
                ]
            },
            { text: '--' },
            { id: 'ind-4', text: 'Item 4', icon: 'fa fa-table' },
        ]
    }, options))
    .select((event) => {
        query('#some-div').html(`
            id: <span style="color: gray">${event.detail.item.id}</span>, &nbsp;&nbsp;&nbsp;
            text: <span style="color: gray">${event.detail.item.text}</span>
        `)
    });
}

function showMenu2(el) {
    w2menu.hide('menu-overlay') // hide if previously opened
    w2menu.show({
        type: 'radio',
        name: 'menu-overlay',
        anchor: el,
        align,
        position,
        hideOn: ['doc-click', 'select', 'blur'],
        items: [
            { id: 1, text: 'Item 1', icon: 'fa fa-star' },
            { id: 2, text: 'Item 2', icon: 'fa fa-star-o' },
            { id: 3, text: 'Item 3', icon: 'fa fa-camera', checked: true },
            { id: 4, text: 'Item 4', icon: 'fa fa-star' },
            { id: 5, text: 'Item 5', icon: 'fa fa-star-o' },
        ]
    })
    .remove(event => {
        w2utils.notify(`Item removed: ${event.detail.item.text}`)
    })
    .select((event) => {
        query('#some-div').html(`
            id: <span style="color: gray">${event.detail.item.id}</span>, &nbsp;&nbsp;&nbsp;
            text: <span style="color: gray">${event.detail.item.text}</span>
        `)
    });
}

function showMenu3(el) {
    w2menu.hide('menu-overlay') // hide if previously opened
    w2menu.show({
        type: 'check',
        name: 'menu-overlay',
        anchor: el,
        align,
        position,
        hideOn: ['doc-click', 'select', 'blur'],
        items: [
            { id: 1, text: 'Item 1', icon: 'fa fa-star' },
            { id: 2, text: 'Item 2', icon: 'fa fa-star-o' },
            { id: 3, text: 'Item 3', icon: 'fa fa-camera' },
            { id: 4, text: 'Item 4', icon: 'fa fa-star' },
            { id: 5, text: 'Item 5', icon: 'fa fa-star-o' },
            { id: 6, text: 'Item 6', icon: 'fa fa-camera' },
        ]
    })
    .remove(event => {
        w2utils.notify(`Item removed: ${event.detail.item.text}`)
    })
    .select((event) => {
        let sel = event.detail.selected.reduce((prev, curr) => {
            prev += (prev != '' ? ', ' : '') + curr.text
            return prev
         }, '')
         query('#some-div').html(sel)
    });
}

function showMenu4(el) {
    w2menu.hide('menu-overlay') // hide if previously opened
    w2menu.show({
        type: 'check',
        name: 'menu-overlay',
        anchor: el,
        align,
        position,
        hideOn: ['doc-click', 'select', 'blur'],
        items: [
            { id: 1, text: 'Item 1', icon: 'fa fa-star', group: '1' },
            { id: 2, text: 'Item 2', icon: 'fa fa-star-o', group: '1' },
            { id: 3, text: 'Item 3', icon: 'fa fa-camera', group: '1' },
            { text: '--' },
            { id: 4, text: 'Item 4', icon: 'fa fa-table', group: '2' },
            { id: 5, text: 'Item 5', icon: 'fa fa-table', group: '2' },
        ]
    })
    .select((event) => {
        let sel = event.detail.selected.reduce((prev, curr) => {
            prev += (prev != '' ? ', ' : '') + curr.text
            return prev
         }, '')
        query('#some-div').html(sel)
    });
}

</script>
